<template>
  <div class="gjPicture">
    <!-- <el-button @click="exportExcel">导出</el-button> -->
    <div class="items" :class="{active: id == i.id}" v-for="i in gjData" :key="i.id" @click="itemClick(i)">
      <!-- <img :src="i.image"> -->
      <img :src="i.image[0]" @dblclick="imgDetail(i.image)">
      <p>{{i.receiptsNumber}}</p>
      <p>科目：{{i.subject}}</p>
      <p>日期：{{i.date}}</p>
      <p>金额：{{i.money}}元</p>
      <p>摘要：{{i.summary}}</p>
    </div>
    <div class="noData" v-if="!dataLen">
      <img src="../../../../assets/img/no-data.png">
      <p>暂无数据</p>
    </div>

    <div v-show="largeImg" id="large">
      <img :src="imgurl">
      <div>
        <span class="el-icon-arrow-left" @click="previousImg"></span>
        <span class="el-icon-arrow-right" @click="nextImg"></span>
        <span class="el-icon-close" @click="()=>{this.largeImg = false}"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { getAccount, listImage } from '../../../../network/currentAccount'
import table2excel from 'js-table2excel'

export default {
  props: {
    limit: {
      type: Number,
      default: 20
    },
    currentPage: {
      type: Number,
      default: 1
    },
    deleted: {
      type: Boolean,
      default: true
    },
    searchParams: {
      type: Object,
      default: {}
    },

    exportExl: {
      type: Boolean,
      default: false
    }
  },
  created(){
    this._getAccount()
  },
  data(){
    return {
      gjData: [],
      id: '',
      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      largeImg: false,
      images: [],
      imgurl: '',
      imgPointer: 0
    }
  },
  watch:{
    dataLen(a,b){
      this.$emit('dataLenChange',a)
      this.pagesNum = Math.ceil( this.dataLen / this.limit)
    },
    pagesNum(a,b){
      this.$emit('pagesNumChange',a)
    },
    limit(a,b){
      this.pagesNum = Math.ceil( this.dataLen / this.limit)
      this._getAccount()
    },
    currentPage(a,b){
      this._getAccount()
    },
    deleted(a,b){
      this._getAccount()
    },
    searchParams(a,b){
      if (a !== {}) {
        this._getAccount(a)
        this.$emit('searchOver')
      }
    },

    exportExl(a,b){
      if (a) {
        this.exportExcel()
      }
    }
  },
  methods: {
    //导出EXCEL
		exportExcel(){
			/** column数据的说明 */ 
			//1.title为column的标题
			//2.key为column对应的key
			//3.type默认是text，若为图片格式type为image , 并且可以设置图片的宽高
      const column = [
        {
          title: '图片',
          key: 'image',
          type: 'image',
          width: 279,
          height: 107
        },
        {
          title: '单号', 
          key: 'receiptsNumber',
          type: 'text'
        },
        {
          title: '科目',
          key: 'subject',
          type: 'text'
        },
        {
          title: '日期',
          key: 'date',
          type: 'text'
        },
        {
          title: '金额',
          key: 'money',
          type: 'text'
        },
        {
          title: '摘要',
          key: 'summary',
          type: 'text'
        }
      ]
      
      //this.newsList是从后端接口中获取数组列表
      //第三个参数是表格名
      table2excel(column, this.gjData, "现金流水列图.xls")
      this.$emit("exportFinish")
	  },

    itemClick(o){
      // console.log(o)
      this.id = o.id
      this.$emit('selectAccount', o.id)
    },
    _getAccount(params = {}){
      let imageMap = {}
      params.limit = this.limit,
      params.page = this.currentPage

      listImage().then(res => {
        // console.log(res)
        if (res.data.data) {
          res.data.data.forEach(e => {
            imageMap[e.id] = e.imageUrls
          })
        }
        return getAccount(params)
      }).then(res => {
        // console.log(res)
        res.data.data.forEach(e => {
          e.money = e.creditor || e.debtor
          e.image = imageMap[e.id] || []
        })
        this.gjData = res.data.data
        this.dataLen = res.data.total
        if (this.gjData.length == 0 && this.currentPage > 1) {
          this.currentPage--
        }
      })
    },

    imgDetail(list){
      // console.log(list)
      this.imgPointer = 0
      this.largeImg = true
      this.images = list
      this.imgurl = this.images[this.imgPointer]
    },
    nextImg(){
      let len = this.images.length
      if (len > 1) {
        if (this.imgPointer < len-1) {
          this.imgurl = this.images[++this.imgPointer]
        } else {
          this.imgurl = this.images[0]
          this.imgPointer = 0
        }
      }
    },
    previousImg(){
      let len = this.images.length
      if (this.imgPointer > 0) {
        this.imgurl = this.images[--this.imgPointer]
      } else {
        this.imgurl = this.images[this.imgPointer = len - 1]
      }
    },
  }
}
</script>

<style scoped>
  .gjPicture{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    white-space: nowrap;
    height: 75vh;
    overflow: auto;
  }
  .gjPicture .items{
    padding: 15px;
    width: 550px;
    height: 380px;
    background-color: #f4f4f4;
    margin-bottom: 15px;
  }
  .gjPicture .items.active{
    background-color: rgb(217, 236, 255);
  }
  .gjPicture .items img{
    width: 100%;
    height: 230px;
  }
  .noData{
    margin-top: 10%;
  }
  .noData img{
    width: 122px;
    height: 96px;
  }
  .noData p{
    text-align: center;
    color: #b8b8b8;
  }

  #large {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgb(0,0,0,0.5);
    text-align: center;
  }
  #large span {
    font-size: 50px;
    color: white;
    font-weight: bold;
    border: solid white;
    margin: 0 1vw;
    border-radius: 30px;
    cursor: pointer;
  }
  #large img {
    max-width: 80vw;
    max-height: 80vh;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  #large>div {
    position: absolute;
    top: 5vh;
    right: 5vw;
  }
</style>